<template>
<div class="container">
    <header class="header">
        <div class="header-content">
            <div class="header-left">
                <a href="#" @click="GoBack()" class="back-btn">
                    <svg t="1751614585251" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" 
                        p-id="1471" width="20" height="20">
                        <path d="M790.865959 73.216062 322.123178 512.062492l468.74278 438.746442c16.397998 16.697962 16.397998 43.894642 0 60.592603-16.397998 16.697962-42.894764 16.697962-59.292762 0l-498.839107-466.943c-8.698938-8.898914-12.398487-20.797461-11.898548-32.496033-0.599927-11.698572 3.099622-23.497132 11.898548-32.496033l498.839107-466.943c16.397998-16.697962 42.894764-16.697962 59.292762 0C807.263957 29.421409 807.263957 56.518101 790.865959 73.216062z" 
                            fill="#272636" 
                            p-id="1472">
                        </path>
                    </svg>
                </a>
                <div class="header-title">我的好友</div>
            </div>
        </div>
    </header>

    <main class="main-content">
        <!-- 标签切换 -->
        <div class="content-tabs fixed-tabs">
            <div class="tab" :class="{'active': activeTab == 'following'}" @click="switchTab('following')">
                关注
            </div>
            <div class="tab" :class="{'active': activeTab == 'followers'}" @click="switchTab('followers')">
                粉丝
            </div>
        </div>

        <!-- 搜索框 - 只在关注页面显示 -->
        <div v-if="activeTab === 'following'" class="search-container">
            <div class="search-box">
                <input 
                    type="text" 
                    v-model="searchKeyword" 
                    placeholder="搜索我的关注" 
                    class="search-input"
                >
                <span class="search-icon">🔍</span>
            </div>
        </div>
        
        <!-- 数量统计 -->
        <div class="count-container">
            <div v-if="activeTab === 'following'" class="count-text">
                我的关注 <span style="font-size: 13px;color: #666;font-weight: 400;">{{ formatNumber(followingCount) }} 人</span>
            </div>
            <div v-if="activeTab === 'followers'" class="count-text">
                共 <span style="font-size: 13px;color: #666;font-weight: 400;">{{ formatNumber(followersCount) }}</span> 个粉丝
            </div>
        </div>

        <!-- 列表内容 -->
        <div class="list-container">
            <!-- 关注 -->
            <div v-show="activeTab === 'following'" class="user-list">
                <!--列表内容-->
                <div v-for="user in filteredFollowingList" :key="user.id" class="user-item">
                    <div class="user-avatar" @click="goToUserProfile(user.id)" :style="{ backgroundImage: user.avatarUrl ? `url(${user.avatarUrl})` : '' }">
                        {{ user.avatarUrl ? '' : user.username?.charAt(0) }}
                    </div>
                    <div class="user-info">
                        <div class="user-name">{{ user.username }}</div>
                        <div class="user-bio">{{ user.bio || '' }}</div>
                    </div>
                    <div class="user-action">
                        <button v-if="!user.isFollow" class="follow-btn" @click="followUser(user.id, true)">关注</button>
                        <button v-else-if="user.isFollow && user.mutualFollow==true" class="follow-btn followed" style="font-weight: 700;" @click="showUnfollowPopup(user.id)">已互粉</button>
                        <button v-else-if="user.isFollow && user.mutualFollow==false" class="follow-btn followed" @click="showUnfollowPopup(user.id)">已关注</button>
                    </div>
                </div>
                
                 <!--文字提示-->
                <div v-if="filteredFollowingList.length === 0 && !isLoadingFollowingList" class="empty-tip">
                    {{ debouncedSearchKeyword ? '没有找到相关用户' : '还没有关注任何人' }}
                </div>

                <!--视图监听盒子-->
                <div ref="viewFlagBox_following">
                    <div v-if="!isHasMoreFollowingList && !isLoadingFollowingList" 
                        style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
                        没有更多关注
                    </div>
                    <div v-else
                        style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
                        努力加载中
                    </div>
                </div>
            </div>

            <!-- 粉丝 -->
            <div v-show="activeTab === 'followers'" class="user-list">
                <!--列表内容-->
                <div v-for="user in followersList" :key="user.id" class="user-item">
                    <div class="user-avatar" @click="goToUserProfile(user.id)" :style="{ backgroundImage: user.avatarUrl ? `url(${user.avatarUrl})` : '' }">
                        {{ user.avatarUrl ? '' : user.username?.charAt(0) }}
                    </div>
                    <div class="user-info">
                        <div class="user-name">{{ user.username }}</div>
                        <div class="user-bio">{{ formatDateOnly(user.followCreateTime) }} 关注了我</div>
                    </div>
                    <div class="user-action">
                        <button v-if="user.mutualFollow" class="follow-btn" :class="{'followed': user.mutualFollow}" @click="showUnfollowPopup(user.id)">已互粉</button>
                        <button v-else class="follow-btn" :class="{'followed': user.mutualFollow}" @click="followUser(user.id, true)">回关</button>
                        <svg @click="showFansOperationPopup(user.id)" t="1756882468065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4427" width="20" height="20">
                            <path d="M512 512m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#8a8a8a" p-id="4428"></path>
                            <path d="M512 307.2m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#8a8a8a" p-id="4429"></path>
                            <path d="M512 716.8m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z" fill="#8a8a8a" p-id="4430"></path>
                        </svg>
                    </div>
                </div>
                
                <!--文字提示-->
                <div v-if="followersList.length === 0 && isLoadingFansList===false" class="empty-tip">还没有粉丝</div>

                <!--视图监听盒子-->
                <div ref="viewFlagBox_fans">
                    <div v-if="!isHasMoreFansList && !isLoadingFansList" 
                        style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
                        没有更多粉丝
                    </div>
                    <div v-else
                        style="height: 30px;display: flex;justify-content: center;font-size: 12px;color: #61666D;">
                        努力加载中
                    </div>
                </div>

            </div>
            
        </div>
    </main>

    <!--弹出框（取消关注）-->
    <van-popup v-model:show="isShowUnfollowPopup" closeable position="bottom" duration="0.2" :style="{ height: '15%' }" @closed="currentUserId=null">
        <div>
            <div style="height: 50px;"></div>
            <div class="popup-cell-box-unfollow">
                <van-cell-group inset style="min-height: 44px;">
                    <van-cell class="popup-cell" value="" @click="followUser(null, false)">
                        <template #title>
                            <div class="popup-cell-title-box">
                                <svg t="1756883250218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6560" width="16" height="16">
                                    <path d="M572.282915 587.416406A293.701506 293.701506 0 0 1 364.586038 86.028148a293.709605 293.709605 0 0 1 415.373506 415.363381 291.777918 291.777918 0 0 1-207.676629 86.024877z m0-523.195671a229.494165 229.494165 0 0 0-162.269829 391.804491 229.502265 229.502265 0 0 0 324.539658-324.590279 227.975543 227.975543 0 0 0-162.269829-67.214212z" fill="#2c2c2c" p-id="6561"></path>
                                    <path d="M139.617367 1024H75.399902a499.029333 499.029333 0 0 1 499.424174-499.424174v64.217464a434.811868 434.811868 0 0 0-435.206709 435.20671z" fill="#2c2c2c" p-id="6562"></path>
                                    <path d="M540.158997 773.96394m10.124147 0l388.19017 0q10.124147 0 10.124147 10.124147l0 44.546247q0 10.124147-10.124147 10.124147l-388.19017 0q-10.124147 0-10.124147-10.124147l0-44.546247q0-10.124147 10.124147-10.124147Z" fill="#2c2c2c" p-id="6563"></path>
                                </svg>
                                <span class="custom-title">取消关注</span>
                            </div>
                        </template>
                    </van-cell>
                </van-cell-group>
            </div>
        </div>
    </van-popup>

    <!--弹出框（粉丝操作）-->
    <van-popup v-model:show="isShowFansOperationPopup" position="bottom" duration="0.2" :style="{ height: '13%' }" @closed="currentUserId_fan=null">
        <div style="height: 100%;display: flex;flex-direction: column;gap: 8px;justify-content: space-between;">
            <van-cell-group>
                <van-cell @click="removeFan()" class="popup-cell" value="">
                    <template #title>
                        <div class="popup-cell-title-box">
                            <svg t="1756885592258" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11260" data-spm-anchor-id="a313x.search_index.0.i5.3f723a81u2e31A" width="16" height="16">
                                <path d="M937.5 366.6c0-64.17-51.51-116.38-114.82-116.38H626.82v-76.79c0-64.17-51.51-116.38-114.82-116.38s-114.82 52.21-114.82 116.38v76.79H201.32c-63.31 0-114.82 52.21-114.82 116.38 0 51.81 33.58 95.81 79.83 110.85v457.02c0 17.95 14.55 32.5 32.5 32.5h626.34c17.95 0 32.5-14.55 32.5-32.5V477.45c46.25-15.04 79.83-59.04 79.83-110.85zM792.67 901.96H648.64V630.39c0-17.95-14.55-32.5-32.5-32.5s-32.5 14.55-32.5 32.5v271.58H430.36V630.39c0-17.95-14.55-32.5-32.5-32.5s-32.5 14.55-32.5 32.5v271.58H231.33V482.98h561.34v418.98z m30.01-483.98H201.32c-27.47 0-49.82-23.05-49.82-51.38s22.35-51.38 49.82-51.38h228.35c17.95 0 32.5-14.55 32.5-32.5v-109.3c0-28.33 22.35-51.38 49.82-51.38s49.82 23.05 49.82 51.38v109.29c0 17.95 14.55 32.5 32.5 32.5h228.35c27.47 0 49.82 23.05 49.82 51.38s-22.33 51.39-49.8 51.39z" fill="#2c2c2c" p-id="11261">
                                </path>
                            </svg>
                            <span class="custom-title">移除粉丝</span>
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
            <div @click="cancelSelectFan()" style="line-height: 24px;background-color: #fff;font-size: 14px;display: flex;justify-content: center;padding: 10px 16px;">
                取&thinsp;消
            </div>
        </div>
    </van-popup>

</div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'
import 'vant/lib/toast/style' // 解决showToast的样式问题，问题参考：https://vant4.ylhtest.com/#/zh-CN/quickstart#4.-yin-ru-han-shu-zu-jian-de-yang-shi
import api from '@/api/index.js'
import { UserInfoStore } from '@/stores/userInfoStore'
import { TipStore } from '@/stores/tipStore'
import { formatNumber } from '@/utils/format.js'

const router = useRouter()
const route = useRoute()

const user_Store = UserInfoStore()
const tip_Store = TipStore()

// #region 1.公用
const activeTab = ref('following') // 默认显示关注页面

// #region 方法
// 切换标签
function switchTab(tab) {
    activeTab.value = tab
    window.scrollTo(0, 0) // 滚动到顶部
}

// 加载更多数据
async function loadMoreData() { 
    // 1.关注列表
    if(activeTab.value === 'following'){
        // 如果输入框有值，则进行搜索的加载更多，而不是普通的加载更多
        if(debouncedSearchKeyword.value && debouncedSearchKeyword.value.trim()!==''){
            if(isHasMoreFilteredData.value===false || isFilterSearching.value===true){ return }
            console.log('输入框有值，进行搜索的加载更多！')
            filteredSearchPageNum.value += 1 // 下一页
            filteredSearch(debouncedSearchKeyword.value)
            return
        }

        if(isHasMoreFollowingList.value===false || isLoadingFollowingList.value===true){ return }
        console.log('加载更多关注列表数据！')
        pageNum_follow.value += 1 // 下一页
        await getMyFollowing()
    }
    // 2.粉丝列表
    else if(activeTab.value === 'followers'){
        if(isHasMoreFansList.value===false || isLoadingFansList.value===true){ return }
        console.log('加载更多粉丝列表数据！')
        pageNum_fans.value += 1 // 下一页
        await getMyFans()
    }
    else{
        tip_Store.errorTip("加载失败")
        return
    }
}

// 格式化时间，只显示日期部分
function formatDateOnly(dateTimeString) {
    if (!dateTimeString) return '';
    return dateTimeString.split(' ')[0];
}

// 跳转用户个人主页
function goToUserProfile(uid) {
    router.push({
        name: 'UserProfile',
        query: { uid: uid }
    });
}

// 返回
function GoBack() {
    router.go(-1)
}
// #endregion

// #endregion ---公用结束---


// #region 2.关注
const followingCount = ref(0) // 总关注数
const isShowUnfollowPopup = ref(false) // 弹出框标识--取消关注
const currentUserId = ref(null) // 当前对哪个用户进行操作
const searchKeyword = ref('')
const debouncedSearchKeyword = ref('')
let debounceTimer = null

const pageNum_follow = ref(1) // 当前关注列表页数
const pageSize_follow = ref(10) // 每页展示数量
const isLoadingFollowingList = ref(false) // 是否正在加载关注列表
const isHasMoreFollowingList = ref(true) // 是否还有关注数据
const followingList = ref([]) // 关注列表

// [搜索我的关注]相关参数
const filteredSearchPageNum = ref(1)
const filteredSearchPageSize = ref(10)
const filteredSearchListCount = ref(0)
const isHasMoreFilteredData = ref(true)
const isFilterSearching = ref(false)
const filteredFollowingList = ref([]) // 过滤后的关注列表


// #region 方法
// 关注或取关
const followUser = async(fid, is_follow:boolean)=>{
    if(fid){ currentUserId.value = fid }
    if (currentUserId.value == null) {
        alert("参数错误") 
        return 
    }

    try{
        await api.Follow_follow(user_Store.userInfo.id, currentUserId.value, is_follow)
        const followUser = followingList.value.find(user => user.id === currentUserId.value);
        if (followUser) {
            followUser.isFollow = is_follow; // 更新关注信息
        }
        followersList.value.find(user => user.id === currentUserId.value).mutualFollow = is_follow // 更新粉丝信息
    }catch(err){
        tip_Store.errorTip('网络繁忙')
        console.log(err)
    }finally{
        isShowUnfollowPopup.value = false
        currentUserId.value = null
    }
}

// 显示取消关注弹出框
function showUnfollowPopup(userId) {
    currentUserId.value = userId
    isShowUnfollowPopup.value = true
}

// #endregion


// #endregion ---关注结束---


// #region 3.粉丝
const followersCount = ref(256) // 假数据
const isShowFansOperationPopup = ref(false) // 弹出框标识--移除粉丝
const currentUserId_fan = ref(null) // 当前操作的用户ID（粉丝）

const pageNum_fans = ref(1) // 当前粉丝列表页数
const pageSize_fans = ref(10) // 每页展示数量
const isLoadingFansList = ref(false) // 是否正在加载粉丝列表
const isHasMoreFansList = ref(true) // 是否还有粉丝数据

const followersList = ref([]) // 粉丝列表

// #region 方法
// 显示粉丝操作弹出框
function showFansOperationPopup(userId) {
    currentUserId_fan.value = userId
    isShowFansOperationPopup.value = true
}

// 取消选中粉丝
function cancelSelectFan() {
    currentUserId_fan.value = null
    isShowFansOperationPopup.value = false
}

// 移除粉丝
const removeFan = async() => {
    try {
        let res = await api.Follow_follow(currentUserId_fan.value, user_Store.userInfo.id, false)
        if(res.data.code == 1){
            // 在前端移除粉丝
            const index = followersList.value.findIndex(user => user.id === currentUserId_fan.value)
            if (index !== -1) {
                followersList.value.splice(index, 1)
                followersCount.value--
            }
            showToast('移除成功');
        }
    } catch (err) {
        tip_Store.errorTip('系统繁忙，请稍后再试')
    }finally{
        currentUserId_fan.value = null
        isShowFansOperationPopup.value = false
    }
}

// #endregion

// #endregion ---粉丝结束---


// #region 4.关于加载更多
const viewFlagBox_following = ref(null);
const viewFlagBox_fans = ref(null);
let observer = null;

function observerViewFlagBox(){
    observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                console.log('进入视图!!!');
                loadMoreData()
            } else {

            }
        });
    }, {
        threshold: 0, // 当元素哪怕有1像素进入视图时触发（可调整，如0.5表示50%可见）
        rootMargin: '0px' // 可设置根元素的边距（用于提前触发）
    });

    if (viewFlagBox_following.value) {
        observer.observe(viewFlagBox_following.value);
    }
    if (viewFlagBox_fans.value) {
        observer.observe(viewFlagBox_fans.value);
    }
}
// #endregion


// #region 5.获取数据
// 获取我的关注
const getMyFollowing = async() => {
    try {
        isLoadingFollowingList.value = true
        const res = await api.Follow_getMyFollow(user_Store.userInfo.id, pageNum_follow.value, pageSize_follow.value)
        if (res.data.code != 1) {
            tip_Store.errorTip('获取数据失败')
            return
        }
        if (res.data.data.list.length < pageSize_follow.value) {
            isHasMoreFollowingList.value = false // 没有更多数据了
        }
        followingList.value = [...followingList.value ,...res.data.data.list]
        followingCount.value = res.data.data.total

        // 为每个用户对象添加一个属性，用于标识是否关注（默认为都关注，用途：在该界面取消关注时，将其标识为未关注）
        followingList.value.forEach(user => {
            user.isFollow = true
        })
        
        // 如果搜索关键词为空，更新过滤后的关注列表（确保页面刚加载时，filteredFollowingList.value 会在数据加载完成后被正确填充）
        if (!debouncedSearchKeyword.value) {
            filteredFollowingList.value = followingList.value
        }
    }catch(err){
        console.log('发生错误：', err)
    }finally{
        isLoadingFollowingList.value = false
    }
}

// 获取我的关注--根据关键字搜索
const filteredSearch = async(keyword) =>{
    try {
        isFilterSearching.value = true

        // 关键词为空，直接显示原始列表
        if (!keyword) {
            filteredFollowingList.value = followingList.value
            return
        }
        keyword = keyword.trim().toLowerCase()
        
        // 执行搜索
        const res = await api.Follow_getMyFollowByName(
            user_Store.userInfo.id, 
            keyword, 
            filteredSearchPageNum.value, 
            filteredSearchPageSize.value
        )
        if(res.data.data.list.length < filteredSearchPageSize.value){
            isHasMoreFilteredData.value = false // 没有更多数据
        }
        // 对列表赋值
        if(filteredSearchPageNum.value === 1){
            // 如果是刚开始搜，就要把普通的关注列表覆盖掉
            filteredFollowingList.value = res.data?.data?.list || []
        }else{
            // 如果不是开始搜，就追加到列表后面
            filteredFollowingList.value = [...res.data?.data?.list || [], ...filteredFollowingList.value]
        }
        filteredSearchListCount.value = res.data?.data?.total || 0

    } catch (err) {
        console.error("搜索关注列表时出错:", err)
        filteredFollowingList.value = []
    } finally {
        isFilterSearching.value = false
    }
}

// 获取我的粉丝
const getMyFans = async()=>{
    try{
        isLoadingFansList.value = true
        await api.Follow_getMyFans(user_Store.userInfo.id, pageNum_fans.value, pageSize_fans.value).then((res) => {
            if (res.data.code != 1) {
                tip_Store.errorTip('获取数据失败')
                return
            }
            if (res.data.data.list.length < pageSize_fans.value) {
                isHasMoreFansList.value = false // 没有更多数据了
            }
            followersList.value = [...followersList.value ,...res.data.data.list]
            followersCount.value = res.data.data.total
        })
    }catch(err){
        console.log('发生错误：', err)
    }finally{
        isLoadingFansList.value = false
    }
    
}


// #endregion


// 监听搜索关键词变化，实现防抖
watch(searchKeyword, (newValue) => {
    // 清除之前的定时器
    if (debounceTimer) { clearTimeout(debounceTimer) }
    
    // 设置新的定时器，500毫秒后更新防抖关键词
    debounceTimer = setTimeout(() => {
        debouncedSearchKeyword.value = newValue
        filteredSearchPageNum.value = 1 // 关键词改变时，重新从第一页开始搜索
        filteredSearch(debouncedSearchKeyword.value)
    }, 500)
})



onMounted(async() => {
    // 根据URL参数设置默认标签页
    const type = route.query.type
    if (type === 'followers') {
        activeTab.value = 'followers'
    } else {
        activeTab.value = 'following'
    }

    observerViewFlagBox() // 判断某个元素是否进入页面视图，用于加载更多数据

    getMyFollowing() // 查询我的关注
    getMyFans()// 查询我的粉丝
})


</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background: #f5f5f5;
    overflow-y: auto; /* 允许垂直滚动 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* #region 头部 */
.header {
    background: white;
    padding: 15px 20px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.back-btn {
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    color: #333;
    display: flex;
    align-items: center;
}

.header-title {
    font-size: 16px;
    font-weight: 500;
}
/* #endregion 头部结束 */

/* #region 内容区域 */
.main-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    padding-top: 47px; /* 为固定标签留出空间 */
}

.content-tabs {
    background: white;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
}

.fixed-tabs {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 99;
}

.tab {
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.tab.active {
    color: #ff6b6b;
    border-bottom-color: #ff6b6b;
}

.search-container {
    padding: 12px 15px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 8px 35px 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 12px;
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus {
    border-color: #ff6b6b;
}

.search-icon {
    position: absolute;
    right: 12px;
    color: #999;
}

.count-container {
    padding: 10px 15px;
    background: white;
    border-bottom: 1px solid #f0f0f0;
    display: block; /* 确保容器可见 */
}

.list-container {
    background: #f5f5f5;
    margin-top: 10px;
}

.count-text {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

.user-list {
    padding: 10px;
}

.user-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
}

.user-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    margin-right: 12px;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-bio {
    font-size: 12px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-action {
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 12px
}

.follow-btn {
    width: 62px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ff6b6b;
    background: #ff6b6b;
    color: white;
    transition: all 0.3s;
}

.follow-btn.followed {
    background: white;
    color: #ff6b6b;
}

.empty-tip {
    text-align: center;
    padding: 30px 0;
    color: #999;
    font-size: 14px;
}

/* 弹出框样式 */
.van-popup.van-popup--bottom {
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}
.popup-cell-box-unfollow {
    padding: 10px 0;
}
.popup-cell {
    min-height: 44px;
    cursor: pointer;
}
.popup-cell-title-box {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-title {
    font-size: 14px;
    color: #333;
}

/* #endregion 内容区域结束 */
</style>